<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <link rel="stylesheet" type="text/css" href="../../layui-transfer/layui/layui/css/layui.css"/>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
        <button type="button" class="layui-btn" id="test2">
            <i class="layui-icon">&#xe67c;</i>拖拽上传
        </button>
        <button type="button" class="layui-btn" id="test3">
            <i class="layui-icon">&#xe67c;</i>多文件上传
        </button>

    </div>
    <div class="layui-row">
        <div class="layui-col-md4">

            <!-- 左树-->
            <div id="demo"></div>
        </div>
        <div class="layui-col-md8">
            <!--右表-->
             <table id="filetable"  lay-filter="filetablefilter"></table>
        </div>
    </div>

</div>

<div class="layui-upload-drag" id="test10" style="display: none">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>

<script src="../../layui-transfer/layui/layui/layui.js"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    var tree;
    var table;
    var upload;
    var layer;
    var eid = localStorage.getItem("eid");
    var ename = localStorage.getItem("ename");

    var fdata;
    layui.use(['tree','table','upload','layer'],function (){
         tree = layui.tree;
         table = layui.table;
         upload = layui.upload;
         layer = layui.layer;

        // 添加所属目录表
        addfolder();


        $("#test2").click(function (){
            layer.open({
                type:1,
                title:'拖拽上传',
                content:$("#test10"),
                end:function (){
                    $("#test10").css("display","none");
                }

            })
        })


    })





    // 查询数据渲染树
    function getFolderTree(){


        $.ajax({
            type:'get',
            url:'/folder/getTree',
            data:{equpid:eid,equipname:ename},
            dataType: 'json',
            success:function (res){

                // 渲染树
                treeRender(res);

            }
        })

    }


    function treeRender(d){
        tree.render({
            elem:'#demo',
            data: d,
            showCheckbox:true
            ,oncheck: function(obj){ // 复选框被点击
                debugger;

                fdata =  obj.data.id;

                console.log(fdata);

                 console.log(obj.data); //得到当前点击的节点数据
                 console.log(obj.checked); //得到当前节点的展开状态：open、close、normal

                if(obj.checked){ // 勾选上


                    // 查询对应的附属文件表，渲染表格
                    getTableData(fdata);
                    uploadfile();

                }
        }
        })
    }
    // 查询对应的附属文件表，渲染表格
    function getTableData(d){
        // d .id .title 所属目录folder的id和名称

        table.render({
            elem:'#filetable',
            url:'/file/getPage?fid='+d,
            cols:[
                [
                {field:'id',title:'ID列'},
                {field:'fileName',title:'文件名'},
                {field:'fileFolderId',title:'所属目录ID'},
                {field:'equipmentId',title:'设备ID'},
              ]
            ],
            parseData:function (res){
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                }
            }

        })


    }


    function uploadfile(){
        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: '/file/uploadFile'
            ,accept: 'file'
            ,data: { fileFolderId:fdata,
                equipmentId:eid
            }
            ,done: function(res){
                layer.msg('上传成功');
                getTableData(fdata); // 重新渲染表格
            }
        });

        upload.render({
            elem:'#test1',
            url:'/file/uploadFile',
            accept:'file', // 指定上传的文件类型
            data:{fileFolderId:fdata,equipmentId:eid}
            ,done: function(res){
                //上传完毕回调
                layer.msg("上传完毕");
                getTableData(fdata); // 重新渲染表格
            }
            ,error: function(){
                //请求异常回调
                layer.msg("请求异常");
            }
        })
    }

    function addfolder(){


        var foldername = ename+"附属目录";
        $.ajax({
            type:'post',
            url:'/folder/add',
            data:{equipmentId:eid,name:foldername},
            dataType:'json',
            success:function (res){
                // 渲染所属目录的树
                getFolderTree();

            }
        })

    }




</script>
</body>
</html>